<template>
  <div>
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="40"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <span class="span">
          {{ item.i }}
        </span>
        <img
          src="https://img0.baidu.com/it/u=3896130905,2562016716&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
          alt=""
          srcset=""
        />
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from "vue-grid-layout";
export default {
  name: "test",
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 4, h: 4, i: "1" },
        { x: 4, y: 0, w: 4, h: 4, i: "2" },
        { x: 8, y: 0, w: 4, h: 4, i: "3" },
        { x: 0, y: 1, w: 4, h: 4, i: "4" },
        { x: 4, y: 1, w: 4, h: 4, i: "5" },
        { x: 8, y: 1, w: 4, h: 4, i: "6" },
        { x: 0, y: 2, w: 4, h: 4, i: "7" },
        { x: 4, y: 2, w: 4, h: 4, i: "8" },
        { x: 8, y: 2, w: 4, h: 4, i: "9" },
      ],
    };
  },
  async created() {},
  mounted() {},
  methods: {},
  beforeDestroy() {},
};
</script>

<style>
body {
  width: 210mm;
  height: 297mm;
  background-color: antiquewhite;
  border: 1px solid #ddd;
}
</style>
<style lang="scss" scoped>
.vue-grid-item {
  position: relative;
  background-color: #ddd;
}
.vue-grid-item img {
  width: 100%;
  height: auto;
}
.span {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
